{% set navigation_bar = [
    ('/', 'index', 'Home'),
    ('#', 'trackit', 'QSI trackit'),
    ('#', 'airtime', 'QSI airtime'),
    ('#', 'portfolio', 'Portfolio'),
    ('#', 'media', 'Media Center'),
    ('/about/', 'about', 'About'),
    ('/contact', 'contact', 'Contact Us'),
] -%}
{% set active_page = active_page|default('index') -%}
{% set home_page = home_page|default('default') -%}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{title}}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- Le styles -->
        <link href="/static/css/bootstrap.css" rel="stylesheet">
        <link href="/static/css/style_bckup.css" rel="stylesheet">
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    </head>
    <body id="{{home_page}}">
        <!-- Attention Grabber -->
        <div id="attention">
            <div class="container">
                <div class="row">
                    <div class="span12">
                        <button title="Close">Close</button>
                        Welcome  - this is where we get to meet&hellip;
                    </div>
                </div>
            </div>
        </div>
        <!-- #attention -->
        <!-- Header -->
        <header id="header">
            <div class="container">
                <!-- Logo -->
                <div id="logo" class="row">
                    <div class="span12">
                        <ul class="pull-right hidden-mobile">
                            <li><a href="/login">Log in</a></li>
                            <li><a href="#">Create an account</a></li>
                        </ul>
                        <a href="#"><img src="/static/img/qsi-logo.png" alt="Popular."></a>
                    </div>
                </div>
                <!-- #logo -->
                <!-- Main menu -->
                <div id="navigation" class="row">
                    <div class="span12">
                        <nav>
                            <ul>
                                {% for href, id, caption in navigation_bar %}
                                  <li {% if id == active_page %} class="active"{% endif%}>
                                      <a href="{{ href|e }}">{{ caption|e }}</a></li>
                                {% endfor %}
                            </ul>
                        </nav>
                    </div>
                </div>
                <!-- #navigation -->
            </div>
            <!-- .container -->
            <!-- Slider -->
            {% block slider %}{% endblock %}
            <!-- #slider-animated -->
        </header>
        <!-- #header -->
        <!-- Page Head -->
        {% block page_head %}{% endblock %}
        <!-- #page-head -->
        <!-- Main Content -->
        <section id="content">
            {% block content %}{% endblock %}
        </section>
        <!-- #content -->
        <!-- Social Profiles -->
        {% block social_profiles_inner %}{% endblock %}
        <!-- #social-profiles -->
        <!-- Footer -->
        <footer id="footer">
            {% block footer_inner %}{% endblock %}
            <div id="copyright">
                <div class="container">
                    <div class="row">
                        <div class="span8">
                            Copyright 2013 Quick Serve Infosystems Ltd <span>/</span> All Right Reserved <span>/</span> Powered By <a href="http://w3c.org">HTML5 &amp; CSS3</a>
                        </div>
                        <div class="span4">Design by <a href="http://perationtech.com">Peration Tech</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #copyright -->
        </footer>
        <!-- #footer -->
        <!-- Le javascript================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="/static/js/jquery-1.7.2.min.js"></script>
        <script src="/static/js/bootstrap.min.js"></script>
        <script src="/static/js/superfish.js"></script>
        <script src="/static/js/jquery.mobilemenu.js"></script>
        <script src="/static/js/jquery.tweet.js"></script>
        <script src="/static/js/jquery.liquidcarousel.js"></script>
        <script src="/static/js/jquery.flexslider-min.js"></script>
        <script src="/static/js/main.js"></script>
    </body>
</html>